<template>
  <div id="progress">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line">
        <i class="el-icon-printer"></i>打印/下载报名表
      </el-col>
    </el-row>
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="三位一体" name="first">
          <el-card class="box-card" style="text-align:center;">
            <table class="layui-table">
              <tbody>
                <th colspan="12" style="text-align: center">浙江工商大学“三位一体”综合评价招生报名表</th>
                <tr>
                  <td colspan="2">姓名</td>
                  <td>
                    张三
                  </td>
                  <td colspan="2">性别</td>
                  <td colspan="2">
                    男
                  </td>
                  <td colspan="2">出生年月</td>
                  <td colspan="2">
                    1995-26-23
                  </td>
                  <td rowspan="4">
                    <img :src="imgUrl" height="150px" width="100px">
                  </td>
                </tr>
                <tr>
                  <td colspan="2">政治面貌</td>
                  <td>
                    党员
                  </td>
                  <td colspan="2">民族</td>
                  <td colspan="2">
                    汉族
                  </td>
                  <td colspan="2">考生类别</td>
                  <td colspan="2">
                    应届
                  </td>
                </tr>
                <tr>
                  <td colspan="2">身份证号</td>
                  <td colspan="4">
                    300122199502305623
                  </td>
                  <td colspan="2">生源地</td>
                  <td colspan="3">
                    重庆
                  </td>
                </tr>
                <tr>
                  <td colspan="2">联系手机</td>
                  <td colspan="4">
                    1211365932
                  </td>
                  <td colspan="2">联系手机</td>
                  <td colspan="3">
                    10203265985
                  </td>
                </tr>
                <tr>
                  <td colspan="2">高中地址</td>
                  <td colspan="10">
                    重庆市花卉园松树桥中学
                  </td>

                </tr>
                <tr>
                  <td colspan="2">家庭地址</td>
                  <td colspan="10">
                    重庆市花卉园松树桥中学
                  </td>

                </tr>


                <tr>
                  <td class="members" :rowspan="rowspan" colspan="2">家庭成员及社会关系</td>
                  <td colspan="2">称谓</td>
                  <td colspan="2">姓名</td>
                  <td colspan="3">联系电话</td>
                  <td colspan="3">工作单位</td>
                </tr>
                <template v-for="item in tableData">
                  <tr class="member" id="test">
                    <td colspan="2">
                      {{item.name}}
                    </td>
                    <td colspan="2">
                      {{item.name}}
                    </td>
                    <td colspan="3">
                      {{item.name}}
                    </td>
                    <td colspan="3">
                      {{item.address}}
                    </td>
                  </tr>
                </template>
                <tr>
                  <td class="members" colspan="2">选考科目</td>
                  <td colspan="5">
                    数学，英语，语文
                  </td>
                  <td colspan="2">测试类别</td>
                  <td colspan="3">
                    文法类
                  </td>
                </tr>
                <tr>
                  <td class="members" colspan="2" rowspan="4">会考成绩</td>
                  <td width="70px">语文</td>
                  <td width="70px">
                    A
                  </td>
                  <td colspan="2" width="80px">历史</td>
                  <td colspan="2">
                    A
                  </td>
                  <td colspan="2" width="40px">化学</td>
                  <td colspan="2">
                    A
                  </td>
                </tr>
                <tr>
                  <td>数学</td>
                  <td>
                    A
                  </td>
                  <td colspan="2">物理</td>
                  <td colspan="2">
                    A
                  </td>
                  <td colspan="2">技术</td>
                  <td colspan="2">
                    A
                  </td>
                </tr>
                <tr>
                  <td>英语</td>
                  <td>
                    A
                  </td>
                  <td colspan="2">地理</td>
                  <td colspan="2">
                    A
                  </td>
                  <td colspan="2">政治</td>
                  <td colspan="2">
                    A
                  </td>
                </tr>
                <tr>
                  <td>生物</td>
                  <td>
                    A
                  </td>
                  <td colspan="8"></td>
                </tr>
                <tr>
                  <td class="awards" colspan="2" :rowspan="Srowspan">是否专项生</td>
                  <td :colspan="Scolspan" :rowspan="Srowspan">
                    是
                  </td>
                  <td colspan="5" v-show="specialShow">
                    专项名称
                  </td>
                  <td colspan="4" v-show="specialShow">
                    证明
                  </td>
                </tr>
                <tr v-show="specialShow">
                  <td colspan="5">
                    财经
                  </td>
                  <td colspan="4">

                  </td>
                </tr>
                <tr>
                  <td class="study_experience" :rowspan="Erowspan" colspan="2">学习经历</td>
                  <td colspan="2">何年何月至何年何月</td>
                  <td colspan="2">何学校或单位</td>
                  <td colspan="3">任何职</td>
                  <td colspan="3">证明人</td>
                </tr>
                <template v-for="item in tableData">
                  <tr class="experience">
                    <td colspan="2">
                      {{item.name}}
                    </td>
                    <td colspan="2">
                      {{item.name}}
                    </td>
                    <td colspan="3">
                      {{item.name}}
                    </td>
                    <td colspan="3">

                    </td>
                  </tr>
                </template>


                <tr>
                  <td class="awards" colspan="2" :rowspan="Arowspan">奖惩情况</td>
                  <td colspan="3">
                    获奖时间
                  </td>
                  <td colspan="4">
                    奖项名称
                  </td>
                  <td colspan="3">
                    证明
                  </td>
                </tr>
                <template v-for="item in tableData">
                  <tr class="award">
                    <td colspan="3">
                      {{item.name}}
                    </td>
                    <td colspan="4">
                      {{item.name}}
                    </td>
                    <td colspan="3">

                    </td>
                  </tr>
                </template>
              </tbody>
            </table>
            <div style="text-align: center;">
              <el-button type="primary">打印</el-button>
              <el-button>下载</el-button>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="高水平运动员" name="second">
          <el-card class="box-card" style="text-align:center;margin-bottom:10px;">
            <table class="layui-table">
              <tbody>
                <th colspan="12" style="text-align: center">浙江工商大学“高水平运动员”综合评价招生报名表</th>
                <tr>
                  <td colspan="2">姓名</td>
                  <td>
                    张三
                  </td>
                  <td colspan="2">性别</td>
                  <td colspan="2">
                    男
                  </td>
                  <td colspan="2">出生年月</td>
                  <td colspan="2">
                    1995-26-23
                  </td>
                  <td rowspan="4">
                    <img :src="imgUrl" height="150px" width="100px">
                  </td>
                </tr>
                <tr>
                  <td colspan="2">政治面貌</td>
                  <td>
                    党员
                  </td>
                  <td colspan="2">民族</td>
                  <td colspan="2">
                    汉族
                  </td>
                  <td colspan="2">考生类别</td>
                  <td colspan="2">
                    应届
                  </td>
                </tr>
                <tr>
                  <td colspan="2">身份证号</td>
                  <td colspan="4">
                    300122199502305623
                  </td>
                  <td colspan="2">生源地</td>
                  <td colspan="3">
                    重庆
                  </td>
                </tr>
                <tr>
                  <td colspan="2">联系手机</td>
                  <td colspan="4">
                    1211365932
                  </td>
                  <td colspan="2">联系手机</td>
                  <td colspan="3">
                    10203265985
                  </td>
                </tr>
                <tr>
                  <td colspan="2">高中地址</td>
                  <td colspan="10">
                    重庆市花卉园松树桥中学
                  </td>

                </tr>
                <tr>
                  <td colspan="2">家庭地址</td>
                  <td colspan="10">
                    重庆市花卉园松树桥中学
                  </td>

                </tr>


                <tr>
                  <td class="members" :rowspan="rowspan" colspan="2">家庭成员及社会关系</td>
                  <td colspan="2">称谓</td>
                  <td colspan="2">姓名</td>
                  <td colspan="3">联系电话</td>
                  <td colspan="3">工作单位</td>
                </tr>
                <template v-for="item in tableData">
                  <tr class="member" id="test">
                    <td colspan="2">
                      {{item.name}}
                    </td>
                    <td colspan="2">
                      {{item.name}}
                    </td>
                    <td colspan="3">
                      {{item.name}}
                    </td>
                    <td colspan="3">
                      {{item.address}}
                    </td>
                  </tr>
                </template>
                <tr>
                  <td colspan="2">报考专业</td>
                  <td colspan="4">
                    计算机科学与技术
                  </td>
                  <td colspan="2">
                    选考类别
                  </td>
                  <td colspan="4">
                    文综
                  </td>
                </tr>
                <tr>
                  <td colspan="2">运动项目(含等级)</td>
                  <td colspan="10">
                    国家二级运动员
                  </td>
                </tr>
                <tr>
                  <td class="awards" colspan="2" :rowspan="Arowspan">奖惩情况</td>
                  <td colspan="3">
                    获奖时间
                  </td>
                  <td colspan="4">
                    奖项名称
                  </td>
                  <td colspan="3">
                    证明
                  </td>
                </tr>
                <template v-for="item in tableData">
                  <tr class="award">
                    <td colspan="3">
                      {{item.name}}
                    </td>
                    <td colspan="4">
                      {{item.name}}
                    </td>
                    <td colspan="3">

                    </td>
                  </tr>
                </template>

                <tr>
                  <td rowspan="2" colspan="2">学校对学生的综合评定</td>
                  <td colspan="10">
                    表现良好
                  </td>
                </tr>
              </tbody>
            </table>
            <div style="text-align: center;">
              <el-button type="primary">打印</el-button>
              <el-button>下载</el-button>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  export default {

    data() {
      return {
        rowspan: 3,
        Erowspan: 3,
        Arowspan: 3,
        Scolspan: 1,
        Srowspan: 2,
        imageUrl: '',
        checked: true,
        specialShow:true,
        tableData: [{
          date: '2016-05-02',
          name: '三位一体',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '高水平运动员',
          address: '上海市普陀区金沙江路 1517 弄'
        }],
        activeName: 'first'

      }
    },
    components: {
      VDistpicker
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  #progress {
    //width:100%;
    //line-height:100%;
    padding: 10px;
    .line {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
    .content {
      padding: 20px;
      text-align: center;
    }
  }

</style>
